<template>
	<view class="mainbgc">
		<!-- 优惠券弹出层 -->
		<u-popup :show="yhqShow" @close="close" mode="center">
			<view class="mainpadding">
				<image class="tupian" :src="coupon.image_text" mode="" @click="lqyhq()"></image>
				<view class="flexcenter margin_top" @click="close">
					<u-icon name="close-circle-fill" color="#fff" size="28"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-sticky bgColor="#f7fbfe">
			<view class="dingbu">
				<view class="flexbetween topposi">
					<view class="" style="width: 50rpx;"></view>
					<view class="flexcolumn" @tap="switchurl('/pages/tongcheng/tongcheng')">
						<text v-if="citytext"
							class="nochecktext wzxk">{{citytext[0]}}{{citytext[1]}}{{citytext.length>=4?"...":citytext.length==3?citytext[2]:''}}</text>
						<text v-else class="nochecktext wzxk">同城</text>
						<view class="noline"></view>
					</view>
					<view class="flexcolumn" @tap="switchurl('/pages/guanzhu/guanzhu')">
						<text class="nochecktext">关注</text>
						<view class="noline"></view>
					</view>
					<view class="flexcolumn" @tap="switchurl('/pages/tuijian/tuijian')">
						<text class="nochecktext">视频</text>
						<view class="noline"></view>
					</view>
					<view class="flexcolumn">
						<text class="checktext">商城</text>
						<view class="line"></view>
					</view>
					<!-- <view class="" style="width: 50rpx;"></view> -->
					<u-icon name="search" color="#333" @tap="search" size="28"></u-icon>
				</view>
				<view class="mainpadding2">
					<view class="">
						<view class="flexbetween">
							<view class="flexleft ssousuobox" @click="jumper('/pages_homepage/sousuo','')">
								<view class="margin_right2">
									<u-icon name="search" color="#999999" size="28"></u-icon>
								</view>
								<input type="text" placeholder="输入商品搜索" :disabled="true">
							</view>
							<view class="" @click="jumper('/pages_homepage/wodeqb',1)">
								<image src="../static/image/system/qbhome.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
							</view>
							<view class="" @click="jumper('/pages_mypage/wodedingd',1)">
								<image src="../static/image/system/orders.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
							</view>
							<view class="dingwei" @click="jumper('/pages_homepage/gouwuche',1)">
								<image src="../static/image/system/carhome.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
								<view class="shulbtn" v-if="goodscarnum">{{goodscarnum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="swiper-item uni-bg-blue" style="padding-bottom: 180rpx;">
			<view class="mainpadding2">
			<u-swiper circular :list="list1" keyName="image_text"></u-swiper>
				<!-- 分类 -->
				<view class="flexleft flex_wrap ffffff radius mainpadding2 margin_top">
					<view class="ershi flexcenter margin_top" v-for="item in goodsClass" :key="item.id"
						@click="tzfl(item)">
						<view class="">
							<view class="icon">
								<image :src="item.image_text" mode=""></image>
							</view>
							<view class="ershil xiaohei textcenter margin_top1">{{item.name}}</view>
						</view>
					</view>
					<view class="ershi flexcenter margin_top" @click="jumper('/pages_homepage/jifensc',1)">
						<view class="">
							<view class="icon">
								<image src="@/static/image/system/jfsc.png" mode=""></image>
							</view>
							<view class="ershil xiaohei textcenter margin_top1">积分商城</view>
						</view>
					</view>
				</view>
				<!-- 商品列表 -->
				<view class="flexbetween flex_wrap">
					<view class="shpbox margin_top" v-for="item in list.data" :key="item.id" @click="tzspxq(item.id)">
						<image class="sptup" :src="item.image_text" mode=""></image>
						<view class="" style="padding: 24rpx; background-color: #fff;">
							<view class="xiankuan ershiba">{{item.title}}</view>
							<view class="flexleft margin_top1">
								<view class="strongtext xiaohong margin_right1">￥{{item.is_dls_goods==0?item.goodsprice.price:item.goodsprice.jh_price}}</view>
								<view class="smalltext xiaohui ">已售{{item.sales}}件</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="wcnshow" :round="10" mode="bottom" :safeAreaInsetBottom="false" @close="wcnshow=false">
				<view class="mainpadding_top ffffff radius">
					<view class="textcenter margin_top bigtext xiaohei fonweight">青少年模式</view>
					<view class="mainpadding_top">
						<view class="flexaround margin_top">
							<view class="flexcolumn">
								<u-icon name="grid" color="#333333" size="28"></u-icon>
								<view class="strongtext xiaohei">海量知识</view>
							</view>
							<view class="flexcolumn">
								<u-icon name="clock" color="#333333" size="28"></u-icon>
								<view class="strongtext xiaohei">控制时长</view>
							</view>
							<view class="flexcolumn">
								<u-icon name="level" color="#333333" size="28"></u-icon>
								<view class="strongtext xiaohei">亲子守护</view>
							</view>
							<view class="flexcolumn">
								<u-icon name="bookmark" color="#333333" size="28"></u-icon>
								<view class="strongtext xiaohei">分龄定制</view>
							</view>
						</view>
						<view class="mainpadding_top flexcenter xiaohong fonweight ershiba" @click="qingshaon()">开启青少年模式</view>
						<view class="bigbtn" style="background-color: #f3f3f4;color: #333;" @click="wcnshow=false">关闭</view>
					</view>
				</view>
		</u-popup>
		<tabbardi ref="tabbardiref" :current="0"></tabbardi>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				yhqShow: false,
				coupon: {},
				list1: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				goodsClass: [],
				longitude: "",
				latitude: "",
				citytext: "",
				cityid:"",
				goodscarnum:0,
				wcnshow:false
			}
		},
		onLoad() {
			if(uni.getStorageSync("qingshaonian")!=1){
				this.wcnshow = true
			}
			uni.hideTabBar()
			this.getbanner()
			this.getgoodsclass()
			this.init()
			
		},
		onShow() {
			// setTimeout(()=>{
			// 	this.$refs.tabbardiref.noreadNum = 0
			// 	this.$refs.tabbardiref.getnoreadNum()
			// },100)
			let storagecity = uni.getStorageSync("storagecity") || null
			if(storagecity){
				this.citytext = storagecity.citytext
				this.latitude = storagecity.latitude
				this.longitude = storagecity.longitude
				this.cityid = storagecity.cityid
			}
			this.gettkyhq()
			if (httpRequest.checkIsLogin()) {
				this.getcarnum()
			}
		},
		methods: {
			qingshaon(){
				uni.setStorageSync("qingshaonian",1)
				this.wcnshow = false
				httpRequest.toast("青少年模式已开启！")
			},
			getcarnum(){
				httpRequest.request('/api/cart/cartList', 'GET', {}).then(res => {
					this.goodscarnum = res.data.length
				}).catch(err => {})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/goods/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					is_scoregoods:0
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getgoodsclass() { //获取商品分类
				httpRequest.request('/api/goods/categoryIndex', 'GET', {}).then(res => {
					this.goodsClass = res.data
				}).catch(err => {})
			},
			getbanner() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 4,
					is_more: 1
				}).then(res => {
					this.list1 = res.data
				}).catch(err => {})
			},
			switchurl(url) {
				uni.switchTab({
					url
				})
				getApp().globalData.videopage = url
			},
			search() {
				uni.navigateTo({
					url: "/pages_homepage/sousuo"
				})
			},
			// 跳转商品详情
			tzspxq(id) {
				uni.navigateTo({
					url: '/pages_homepage/shangpxq?id=' + id
				})
			},
			// 跳转分类商品列表
			tzfl(item) {
				uni.navigateTo({
					url: '/pages_homepage/fenlei?id=' + item.id+"&name="+item.name
				})
			},
			jumper(url,val) {
				if(val==1){
					if (!httpRequest.checkIsLogin()) {
						uni.navigateTo({
							url:"/pages/login/login"
						})
						return false
					}
				}
				uni.navigateTo({
					url: url
				})
			},
			close() {
				this.yhqShow = false
				getApp().globalData.xsyhq = false
			},
			gettkyhq() { //获取首页优惠券弹框
				if (!httpRequest.checkIsLogin()) {
					return false
				}
				let yhqShow = getApp().globalData.xsyhq
				httpRequest.request('/api/user/getIndexCoupon', 'GET', {}).then(res => {
					if (res.data.is_show && yhqShow) {
						this.yhqShow = true
						this.coupon = res.data.coupon
					}
				}).catch(err => {})
			},
			lqyhq() {
				httpRequest.request('/api/user/getUserCoupon', 'GET', {
					id: this.coupon.id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.close()
					}
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ssousuobox {
		background-color: #fff;
		width: 70%;
		border: 2rpx solid #A1D2F8;;
		border-radius: 44rpx;
		padding: 10rpx 30rpx;
	}
	/deep/.u-sticky {
		// #ifdef H5
		top: 0 !important;
		// #endif
	}
	page{
		background-color: #f7fbfe;
	}
	.mainbgc{
		background-color: #f7fbfe;
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.topposi {
		width: 750rpx;
		padding: 120rpx 30rpx 30rpx;
		box-sizing: border-box;
	}


	.checktext {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;

	}

	.nochecktext {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		opacity: .6;
	}

	.line {
		width: 30rpx;
		height: 5rpx;
		border-radius: 5rpx;
		background-color: #333;
		margin-top: 10rpx;
	}

	.noline {
		width: 30rpx;
		height: 5rpx;
		border-radius: 5rpx;
		background-color: #333;
		margin-top: 10rpx;
		opacity: 0;
	}

	// 商品列表
	.sptup {
		width: 100%;
		height: 331rpx;
		border-radius: 24rpx 24rpx 0 0;
	}

	.shpbox {
		width: 48%;
		border-radius: 24rpx;
	}

	//结束
	.swiper {
		min-height: calc(100vh - 140rpx);
		background-color: #F7FBFE;
	}

	.icon {
		margin: auto;
		width: 96rpx;
		border-radius: 50%;
		height: 96rpx;

		image {
			margin: auto;
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.shulbtn {
		opacity: .9;
		position: absolute;
		top: -20rpx;
		background-color: #fff;
		right: -20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		width: 40rpx;
		height: 38rpx;
		font-size: 22rpx;
		border: 1rpx solid #CFCFCF;
	}

	.dingbu {
		background-size: 100% 100%;
		box-sizing: border-box;
		width: 100%;
		background-image: url('../static/image/system/sc.png');
		box-sizing: border-box;
	}

	.tupian {
		width: 550rpx;
		height: 565rpx;
	}

	/deep/.u-popup__content {
		background-color: rgba(0, 0, 0, .01) !important;
	}
</style>